<template>
<q-form @submit="surePhone" class="sure-phone">
  <q-input rounded filled dense autofocus v-model="phone" label="手机号" lazy-rules mask="###########"
           :rules="[val => val && val.length > 0 || '请填写手机号',
                    val => /^1[3456789]\d{9}$/.test(val) || '请填写正确的手机号']" :error="!phoneValid"
           error-message="请填写正确的手机号" ref="phoneInput"
  >
    <template v-slot:prepend>
      <q-icon name="iconfont icontubiao-1" style="color:#333;font-size: 18px" />
    </template>
  </q-input>
  <q-input rounded filled dense v-model="code" label="验证码" lazy-rules bottom-slots maxlength="6"
           :rules="[val => val !== null && val !== '' || '请填写验证码']" ref="codeInput">
    <template v-slot:prepend>
      <q-icon name="iconfont icontubiao-51" style="color:#333;font-size: 18px" />
    </template>
    <template v-slot:append>
      <q-btn @click.stop="sendCode" :disable="codeBtnDisable" dense flat :label="getCodeBtn" color="primary"/>
    </template>
  </q-input>

  <div>
    <q-btn dense unelevated label="下一步" class="full-width login-btn" type="submit" color="primary"/>
  </div>
  <div class="link">
    <router-link to="/login" class="text-grey-10 link-txt">返回</router-link>
  </div>
</q-form>
</template>

<script>
import { sendCode, codeLogin } from 'src/boot/login/login'
import { saveToken, saveRefreshToken } from 'yz-help'
import { mapMutations } from 'vuex'
export default {
  name: 'sure-phone',
  data () {
    return {
      // 手机号
      phone: null,
      phoneValid: true, // 手机号验证
      // 验证码
      code: null,
      codeValid: true, // 验证码是否通过验证
      getCodeBtn: '获取验证码', // 获取验证码按钮文字
      codeBtnDisable: false // 获取验证码按钮是否可点击
    }
  },
  methods: {
    // 确认手机号，去重置密码
    surePhone () {
      let params = {
        phone: this.phone,
        code: this.code
      }
      codeLogin(params).then(res => {
        console.log(res)
        const token = res.data.token_type + ' ' + res.data.access_token
        const refreshToken = res.data.token_type + ' ' + res.data.refresh_token
        saveToken(token)
        saveRefreshToken(refreshToken)
        this.setToken(token)
        this.setRefreshToken(refreshToken)
        this.$router.push({
          path: '/login/reset',
          query: { phone: this.phone }
        })
      })
    },
    // 发送验证码
    sendCode () {
      if (!(this.phone && this.phone.length > 0 && /^1[3456789]\d{9}$/.test(this.phone))) {
        this.$refs.phoneInput.focus()
        this.$refs.codeInput.resetValidation()
        this.phoneValid = false
        return false
      }
      this.phoneValid = true
      sendCode(this.phone).then(res => {
        this.setCodeBtn(60)
        this.$q.dialog({
          title: `<p class="dialog-notice-title">
<i class="iconfont icontubiao-53" ></i> 发送验证码成功</p>`,
          html: true,
          ok: {
            unelevated: true,
            label: '确认'
          }
        })
      })
    },
    // 获取验证码按钮的倒计时
    setCodeBtn (num) {
      this.codeBtnDisable = true
      setTimeout(() => {
        if (num > 0) {
          this.getCodeBtn = `${num}秒后重新发送`
          this.setCodeBtn(num - 1)
        } else {
          this.getCodeBtn = '获取验证码'
          this.codeBtnDisable = false
        }
      }, 1000)
    },
    ...mapMutations({
      'setToken': 'SET_TOKEN',
      'setRefreshToken': 'SET_REFRESHTOKEN'
    })
  }
}
</script>

<style scoped lang="stylus">

</style>
